<template>
	<view>
		<view class="fc1">
			<text class="tx1">热卖服务</text>
			<text class="tx2">最快30分钟上门服务</text>
		</view>

		<view class="fc2">

			<view v-for="(item,index) in list" :key="item.id" class="jkitem" @tap="topages(item)">
				<image :src="item.flImage|imagefilter" mode=""></image>
				<text>{{item.flName}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		base_Url
	} from '../../utils/Url';
	export default {
		data() {
			return {
				list: [
					// {
					// 	itemName: "房屋维修",
					// 	itemImage: "/static/jkeImage/房屋维修.png"
					// },
					// {
					// 	itemName: "家电维修",
					// 	itemImage: "/static/jkeImage/家电维修.png"
					// },
					// {
					// 	itemName: "电脑维修",
					// 	itemImage: "/static/jkeImage/电脑维修.png"
					// },
					// {
					// 	itemName: "管道疏通",
					// 	itemImage: "/static/jkeImage/-s-排水管网.png"
					// },
					// {
					// 	itemName: "开锁换锁",
					// 	itemImage: "/static/jkeImage/home_icon_doorlock.png"
					// },

				]
			}
		},
		filters: {
			imagefilter(e) {
				// console.log('地址信息',e?.url);
				const originalUrl = JSON.parse(e).url
				const updatedUrl = originalUrl.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
				// console.log("adada", updatedUrl);
				return updatedUrl
			}
		},
		methods: {
			topages(e) {
				console.log("去也买你", e);
				this.$toPage("/otherPage/personnelList/personnelList","id",e.id)
			},
			getjkd() {
				this.$http.get('/serviceServicedetail/getReachableImmediately').then(res => {
					console.log('res', res);
					if (res.code == 200) {
						this.list = res.result
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.fc1 {
		display: flex;
		justify-content: space-between;
		padding: 0 15px;

		.tx1 {
			margin-top: 5px;
			font-size: 15px;
			font-family: "Gill Sans", sans-serif;
			font-weight: bold;
		}

		.tx2 {
			margin-top: 5px;
			font-size: 10px;
			color: #e53e31;
		}
	}

	.fc2 {
		margin-top: 18px;
		display: flex;
		justify-content: space-around;
		padding-bottom: 10px;

		.jkitem {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 25px;
				height: 25px;
			}

			text {
				margin-top: 4px;
				font-size: 13px;
				font-family: serif;
			}

		}

	}
</style>